<template>
	<view>
		<view class="bgw">
			<view class="item">
				<view class="flex">
					<view class=" flex-1 flex">
						<view class="font-bold">
							{{detail.date}}
						</view>
						<view class="ml10">
							<u-button type="primary" text="下单" size="mini" :customStyle="btnCustomStyle" @click="order(detail.date,0)"
								v-if="order_length>0 && is_org_purchaser"></u-button>
						</view>
					</view>

					<view class="" style="width: 20%;">
						{{detail.child && detail.child.length}}
					</view>
					<!-- <view class=""  style="width: 15%;" v-if="cost">
						￥{{cost | formatPrice}}
					</view>
					<view class=""  style="width: 15%;" v-else>
						-
					</view> -->
					<view class="" style="width: 60px">
						<view class="flex" style="justify-content: flex-end;">
							<view class="icon-btn" :class="show?'active':''" @click="toggle()">

								<u-icon :name="show?'arrow-up':'arrow-down'" :color="show?'#ffffff':'#999999'" size="16"></u-icon>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view v-show="show">
				<template v-for="(v,time_i) in detail.child">
					<view class="time-item-box" :class="showTimeObj[time_i]?'active':''">
						<u-line></u-line>
						<view class="item">
							<view class="flex">
								<view class="mr15">
									{{v.place_time |formatTime}}
								</view>
								<view class="flex flex-1" style="width: 20%;">
									<!-- <view class="font-bold text-ellipsis" v-if="v.cus_group_id">
										{{v.cus_group_id[1]}}·
									</view> -->
									<view class="font-bold text-ellipsis">
										{{v.create_uid[1]}}
									</view>
									 <!-- style="white-space: nowrap;" -->
									<view class="ml10" v-show="detail.child[time_i].child.length > 0">
										<u-button type="primary" text="下单" size="mini" :customStyle="btnCustomStyle"
											@click="order(detail.date,v.id)" v-if="v.pending_count>0 && is_org_purchaser"></u-button>
									</view>
								</view>
								<view class="" style="width: 22%;">
									<view class="flex">
										<u-tag :text="'待下单('+v.pending_count+')'" plain size="mini" type="warning"
											v-if="v.pending_count>0"></u-tag>
									</view>
									<view class="blank10" v-if="v.pending_count>0 && v.placed_count>0"></view>
									<view class="flex">
										<u-tag :text="'已下单('+v.placed_count+')'" plain size="mini" type="success"
											v-if="v.placed_count>0"></u-tag>
									</view>
								</view>
								<view class="" style="width: 60px">
									<view class="flex" style="justify-content: flex-end;" v-show="detail.child[time_i].child.length > 0">
										<view class="ml10 icon-btn" @click="share()">
											<u-icon name="share" color="#999999" size="16"></u-icon>
										</view>
										<view class="ml10 icon-btn" :class="showTimeObj[time_i]?'active':''" @click="toggle(time_i)">
											<u-icon :name="showTimeObj[time_i]?'arrow-up':'arrow-down'"
												:color="showTimeObj[time_i]?'#ffffff':'#999999'" size="16"></u-icon>
										</view>
									</view>
								</view>
							</view>
						</view>
						<view class="food-box" v-show="showTimeObj[time_i]">
							<view class="item">
								<view class="flex font-24 text-light-gray">
									<!-- <view class="text-center" style="width: 7%;">
										序号
									</view> -->
									<view class="flex-1">
										食材
									</view>
									<view class="text-center" style="width: 18%;">
										数量
									</view>
									<view class="text-center" style="width: 18%;">
										单位
									</view>
									<view class="text-center" style="width: 18%;">
										单价
									</view>
									<view class="text-center"  style="width: 18%;">
										金额
									</view>
								</view>
							</view>
							<template v-for="(food,food_i) in detail.child[time_i].child">
								<!-- <u-line dashed></u-line> -->
								<view class="item">
									<view class="flex">
										<!-- <view class="text-center" style="width: 7%;">
											1
										</view> -->
										<view class="flex-1">
											{{food.mm_id[1]}}
										</view>
										<view class="text-center" style="width: 18%;">
											{{food.purchase_unit_qty}}
										</view>
										<view class="text-center" style="width: 18%;">
											{{food.purchase_unit_id[1]}}
										</view>
										<view class="text-center" style="width: 18%;">
											{{food.purchase_unit_price | formatPrice}}
										</view>
										<view class=" text-center" style="width: 18%;" v-if="food.purchase_cost">
											￥{{food.purchase_cost | formatPrice}}
										</view>
										<view class=" text-center" style="width: 18%;" v-else>
											-
										</view>
									</view>
								</view>
							</template>
						</view>
					</view>
				</template>
			</view>
		</view>

		<view class="blank20"></view>
	</view>
</template>

<script>
	export default {
		name: "chef-item",
		props: {
			detail: Object,
			is_org_purchaser: Boolean
		},
		data() {
			return {
				id: this.detail.id,
				btnCustomStyle: {
					'padding': '0 3px',
					'min-width': 'auto'
				},
				show: false,
				showTimeObj: {},
				statusObj: {
					's0_draft': '待下单',
					's1_handin': '已下单',
					's3_closed': '关闭',
				}
			};
		},
		filters: {
			formatTime(value) {
				let today = new Date(value);
				let date = new Date(value);
				let h_m = `${date.getHours()}`.padStart(2, '0') + `:` + `${date.getMinutes()}`.padStart(2, '0');
				return h_m
			}
		},
		watch: {
			detail: {
				handler(newVal, oldVal) {
					this.show = false;
					this.showTimeObj = {};
				},
				immediate: false,
				deep: true
			}
		},
		computed: {
			cost() {
				let num = 0;
				this.detail.child.forEach(v => {
					v.child.forEach(d => {
						num += d.purchase_cost;
					})
				})
				return num;
			},
			costChild() {
				let numArr = [];

				this.detail.child.forEach(v => {
					let num = 0;
					v.child.forEach(d => {
						num += d.purchase_cost;
					})
					numArr.push(num);
				})
				return numArr;
			},
			mm_length() {
				let num = 0;
				this.detail.child.forEach(v => {
					v.child.forEach(d => {
						num++
					})
				})
				return num;
			},
			order_length() {
				let num = 0;
				this.detail.child.forEach(v => {
					num += v.pending_count
					// if(v.status == 's0_draft'){
					// 	num++
					// }
				})
				return num;
			},
		},
		methods: {

			toggle(time_i) {

				// this.show.show = i;
				if (typeof time_i == 'undefined') {
					this.show = !this.show;
					this.$forceUpdate();
					return;
				}
				this.showTimeObj[time_i] = !this.showTimeObj[time_i];
				this.$forceUpdate();
			},
			order(date, org_pr_id) {
				this.nav('/purchaseOrder/purchaseOrder?date=' + date + '&org_pr_id=' + org_pr_id)
				// 
			},
			share(){
				
			}
		}

	}
</script>

<style>

</style>